$(function () {
	let arr, obj
	let devType = getLocalStorage('devType')
	let user = JSON.parse(getSession('user'))
	let sid
	if (user && user.sid) {
		sid = user.sid
	}
	if (!sid) login('/weixin/login.html')
	/**
	 * 设置查询条件中类型的默认值
	 * @param {string} name url 中参数 'devType' 的属性值
	 */
	function setSelected(name) {
		switch (name) {
			case 'humidity':
				$('#devType option[type="humidity"]').attr('selected', true)
				break;
			case 'SF6':
				$('#devType option[type="SF6"]').attr('selected', true)
				break;
			case 'infrared':
				$('#devType option[type="infrared"]').attr('selected', true)
				break;
			default:
				break
		}
	}

	/**
	 * 获取变电站
	 * @param {string} name 
	 */
	function getDev(name) {
		post({
			url: '/Common/GetAllSite',
			data: {
				userId: name
			},
			success: (data) => {
				if (data != null) {
					renderOption('#device', data)
				}
			}
        })
	}

	/**
	 * ajax 请求渲染 option
	 * @param {string} name 
	 */
	function getDevName(name) {
		post({
			url: '/Common/GetAllPoint',
			data: {
				siteId: name
			},
			success: (data) => {
				if (data != null) {
					renderOption('#devName', data)
				}
			}
		})
	}

	/**
	 * 渲染 option
	 * @param {element} e 
	 * @param {array} arr 
	 */
	function renderOption(e, arr) {
		$(e).children().remove()
		$(e).append(`<option value="0">-- 请选择 --</option>`)
		$.each(arr, (index, item) => {
			if (item.point) renderDevnameOption(e, item)
			else renderDeviceOption(e, item)
		})
		picker(e)
	}

	/**
	 * 渲染设备名称
	 * @param {element} e 
	 * @param {object} item 
	 */
	function renderDevnameOption(e, item) {
		$(e).append(`<option value="${item.sid}">${item.name}</option>`)

	}

	/**
	 * 渲染变电站
	 * @param {element} e 
	 * @param {object} item 
	 */
	function renderDeviceOption(e, item) {
		$(e).append(`<option value="${item.sid}">${item.name}</option>`)
	}

	/**
	 * 获取用户选择的查询条件的值组成的对象
	 * @returns {object} 获取用户选择的查询条件的值
	 */
	function getParamValue() {
		let a = $('#device').val(),
			b = $('#devName').val(),
			c = $('#devType').val()
		return {
			type: c,
			devType: $('#devType option[value="' + c + '"]').text(),
			device: $('#device option[value="' + a + '"]').text(),
			siteId: a,
			grade: $('#grade').val(),
			devName: b ? $('#devName option[value="' + b + '"]').text() : undefined,
			name: b ? b : undefined
		}
	}
	/**
	 * 判断用户查询条件是否都有选择, 如有则回调传递的 function, 否则提示用户查询条件必选
	 * @param {element} e
	 * @param {function} callback
	 */
	function clickFun(e, callback) {
		obj = getParamValue()
		if ((obj.devType != '' && obj.device != '' && obj.grade != '') && (obj.devType != '-- 请选择 --' && obj.device != '-- 请选择 --' && obj.grade != '-- 请选择 --')) {
			callback(e, obj)
		} else {
			alert('请选择必选项')
		}
	}
	/**
	 * 根据传递的数据类型渲染不同的元素
	 * @param {object} data 数据
	 * @param {string} type 类型
	 * @returns {element}
	 */
	function render(data, type) {
		if (type == '温湿度')
			return `<li class="text-c"><a data-href="./humidity.html" class="w100 row link" data-pointid="${data.pointId}" data-device="${data.deviceName}" data-position="${data.pointId}"><div class="col-xs-6">设备点位：${data.pointId}</div><div class="col-xs-6"><p><span>温度: </span>${data.temperature} ℃</p><p><span>湿度: </span>${data.humidity} %</p></div></a></li>`
		else if (type == 'SF6')
			return `<li class="text-c"><a data-href="./humidity.html" class="w100 row link" data-pointid="${data.pointId}" data-device="${data.deviceName}" data-position="${data.pointId}"><div class="col-xs-6">设备点位：${data.pointId}</div><div class="col-xs-6"><p><span>压力: </span>${data.pressure} bar(20℃)</p><p><span>微水: </span>${data.moisture} ppm(20℃)</p></div></a></li>`
		else if (type == '红外')
			return `<li class="text-c"><a data-href="./infrared.html" class="w100 row link" data-pointid="${data.pointId}" data-device="${data.deviceName}" data-position="${data.pointId}"><div class="col-xs-6">设备点位：${data.pointId}</div><div class="col-xs-6">查看详情</div></a></li>`
	}
	/**
	 * 隐藏查询条件
	 */
	function hideSelect() {
		$('#collapseExample').removeClass('in')
	}
	/**
	 * 显示查询条件
	 */
	function showSelect() {
		$('#collapseExample').addClass('in')
	}
	/**
	 * 将选择框变成可搜索的选择框
	 * @param {element} e 选择框
	 */
	function picker(e) {
		$(e).selectpicker({
			'selectedText': 'cat'
		})
	}
	/**
	 * 将数据遍历并根据其数据类型渲染到页面中
	 * @param {array} arr 数据, 数组对象
	 * @param {object} obj 对象, 主要判断对象中类型, 渲染不同的元素
	 */
	function appendFn(arr, obj) {
		$.each(arr, (index, item) => {
			$('.links ul').append(render(item, obj.devType))
		})
	}
	setSelected(devType)
	getDev(sid)
	showSelect()
	$('#device').on('change', (e) => {
		console.log('this is change')
		e = e.target || window.Event || e.srcElement
		getDevName($(e).val())
	})
	/**
	 * 给跳转元素的 url 添加参数并跳转
	 */
	$('.links').on('click', '.link', function (e) {
		e = e || window.Event
		e.stopPropagation()
		clickFun(this, function (event, obj) {
			let url = $(event).data('href')
			obj.position = $(event).data('position')
			obj.pointid = $(event).data('pointid')
			obj.devName = $(event).data('device')
			setLocalStorage('searchKey', JSON.stringify(obj))
			location.href = url
		})
	})
	$('#btnClear').on('click', hideSelect)

	function getSearchPoint(obj) {
		let data = {
			type: obj.type,
			siteId: obj.siteId,
			voltage: obj.grade,
		}
		data.device = obj.name != 0 ? obj.name :  ''
		post({
			url: '/Point/SearchPoint',
			data: data,
			success: (data) => {
				if (data != null) {
					appendFn(data, obj)
				}
			}
        })
	}
	/**
	 * 根据查询条件重新渲染元素
	 */
	$('#btnSubmit').on('click', function () {
		$('.links ul').children('li').remove()
		clickFun(this, function (event, obj) {
			setTimeout(hideSelect, 100)
			getSearchPoint(obj)
		})
	})
	/**
	 * 延迟一定时间执行的 function (节流)
	 * @param {function} fn 延迟执行的 function
	 * @param {number} wait 延迟的时间
	 * @returns {function}
	 */
	function debounce(fn, wait) {
		let timeout = null
		return function () {
			if (timeout !== null) clearTimeout(timeout)
			timeout = setTimeout(fn, wait)
		}
	}
	/**
	 * 执行的 function, 判断是否触底后加载元素, scroll 事件执行函数
	 */
	function handle() {
		let linksScrollTop = $('.links').scrollTop()
		let bodyScrollTop = $('body').height()
		let outerHeight = $('.links ul').outerHeight(true)
		console.log('linksScrollTop: ' + linksScrollTop + ' ---------bodyScrollTop: ' + bodyScrollTop + ' ---------outerHeight: ' + outerHeight)
		arr = []
		if ((linksScrollTop + bodyScrollTop) > (outerHeight - bodyScrollTop)) {
			for (let i = 1; i < 20; i++) {
				arr.push({
					position: i,
					value1: Math.floor(Math.random() * 100),
					value2: Math.floor(Math.random() * 100)
				})
			}
			appendFn(arr, obj)
		}
	}
	//$('.links').on('scroll', debounce(handle, 1000))
})